<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>购物信息</title>
		<style type="text/css">
			header{text-decoration:underline;text-align: center;}
			main{width: 300px;height: auto;display: block;
			margin: 0 auto;
			border-top:  #00FFFF 1px solid;}
			form{text-align: right;}
			#sel{width: 165px;}
			#check{width: 30px;}
		</style>
		
	</head>
	<body>
		<header>
			<h1>购物信息</h1>
			
		</header>
		<main>
		<form action="" method="">
			<label for="one">账号:</label><input type="text" name="" id="one" value="" /><br>
			<label>选择商品:</label>
			<select id="sel">
				<option value ="1">冰淇淋1号</option>
				<option value ="2">冰淇淋2号</option>
				<option value ="3">冰淇淋3号</option>
			</select><br>
			<input type="text" name="" id="check" value="" />
			<input type="button" name="" id="two" value="选择" /><br>
		
			<label for="three">单价:</label><input type="text" name="" id="three" value="" /><br>
			<label for="four">数量:</label><input type="number" name="" id="four" value="" /><br>
			<label for="five">总计:</label><input type="text" name="" id="five" value="" /><br>
			<input type="submit" name="" id="tj" value="提交" />
		</form>
		</main>
	</body>
	<script type="text/javascript">
		var op=document.getElementsByTagName("option");
		var ch=document.getElementById("check");
		var lb0=document.getElementById("two");
		var lb1=document.getElementById("three");
		var lb2=document.getElementById("four");
		var lb3=document.getElementById("five");
		lb0.onclick=function(){
			if(op[0].value==ch.value){
				lb1.value="3.00";
			}
			else if(op[1].value==ch.value){
				lb1.value="6.00";
			}
			else if(op[2].value==ch.value){
				lb1.value="9.00";
			}
			else{alert("没有这个"); ch.value="";}
		}
		lb2.onchange=function(){
			lb3.value=lb1.value*lb2.value;
		}
		
		var tj=document.getElementById("tj");
		tj.onclick=function(){
			alert("你花费了："+lb3.value);
		}
		
		
		
		
	</script>
	
</html>
